import styles from "@styles/updateChannel.module.less";
import React, { useState } from "react";
import { useTypedDispatch, useTypedSelector } from "@store/index";
import { guestChannelSelectors, removeChannel } from "@slice/guestChannel";
import EditButton from "@pages/home/common/EditButton";
import GeekIcon from "@shared/geekIcon";
import { useNavigate, useParams } from "react-router-dom";
import { SlideRef } from "@shared/slide";

interface Props {
  slideRef: React.RefObject<SlideRef | null>;
}

export default function Selected({ slideRef }: Props) {
  // 获取访客频道列表
  const guestChannels = useTypedSelector(guestChannelSelectors.selectAll);
  // 获取访客频道列表的数量
  const guestChannelsTotal = useTypedSelector(
    guestChannelSelectors.selectTotal
  );
  const dispatch = useTypedDispatch();
  const [editing, setEditing] = useState(false);
  const { cid } = useParams();
  const navigate = useNavigate();
  return (
    <>
      <div className={styles.title}>
        <h3>我的频道</h3>
        <h4>点击进入频道</h4>
        <EditButton
          render={guestChannelsTotal > 4}
          value={editing}
          onChange={setEditing}
        />
      </div>
      <div className={styles.list}>
        {guestChannels.map((channel) => (
          <span
            key={channel.id}
            className={Number(channel.id) === Number(cid) ? styles.active : ""}
            onClick={() => {
              navigate(`/${channel.id}`);
              slideRef.current?.close();
            }}
          >
            {channel.name}
            {editing && Number(channel.id) !== 0 && (
              <GeekIcon
                onClick={(event) => {
                  event.stopPropagation();
                  dispatch(removeChannel(channel.id));
                  if (Number(channel.id) === Number(cid)) {
                    navigate("/0");
                  }
                }}
                type={"iconbtn_tag_close"}
              />
            )}
          </span>
        ))}
      </div>
    </>
  );
}
